<template>
  <!-- 选择出发站页 -->
  <view class="stations_depart">
    <!-- 搜索框 S -->
    <view class="seach_wraper"
      ><my-search
        placeholder="请输入出发站点"
        :value="keyword"
        :border="true"
        maxlength="30"
        @change="onInput"
      ></my-search
    ></view>
    <!-- 搜索框 E -->
    <!-- 车站列表 S -->
    <view class="list" v-if="stationList.length && !getStationLoading">
      <view
        class="list_item"
        v-for="(item, index) in stationList"
        v-show="filter(item)"
        :key="index"
        @click="selectStation(item)"
      >
        <text class="text">{{ item.stationName }}</text>
        <text class="text">{{ item.provName }}-{{ item.cityName }}</text>
      </view>
      <view class="no_filter" v-if="!searchResult">
        <image class="img" src="../../static/images/pic_zwcc.png"></image>
        <view class="tip">
          <text class="tip1">暂未查到该车站</text>
          <text class="tip2">输入其他内容检索</text>
        </view>
      </view>
    </view>
    <view v-else class="loading"
      ><my-loading
        @refresh="refresh"
        :loading-type="loadingType"
        :loading-text="loadingText"
        :refresh-btn="refreshBtn"
      ></my-loading
    ></view>
    <!-- 车站列表 N -->
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import mySearch from "@/components/mySearch/mySearch.vue";
import myLoading from "@/components/myLoading/myLoading.vue";
// api
import { $saleStationsDepart } from "../../service/index";
// untils
import { myShowToast, myShowModal } from "../../utils/utils.js";
export default {
  components: { mySearch, myLoading },
  data() {
    return {
      keyword: "", // 输入框内容
      city: "", // 出发城市
      stationList: [], // 车站列表
      loadingType: "no_trips", // loading类型
      loadingText: "", // 提示文案
      getStationLoading: false, // 是否请求中
      refreshBtn: false, // 是否显示刷新重试按钮
      searchResult: true, // 有检索到内容
    };
  },
  watch: {
    keyword(val, oldval) {
      // 搜索结果
      const data = this.stationList;
      const len = data.length;
      for (let i = 0; i < len; i++) {
        let item = data[i];
        const result =
          item.stationName.indexOf(val) != -1 ||
          item.provName.indexOf(val) != -1 ||
          item.cityName.indexOf(val) != -1;
        if (result) {
          this.searchResult = true;
          return;
        } else {
          this.searchResult = false;
        }
      }
    },
  },
  methods: {
    ...mapMutations(["cancelRequest", "updateStationStart"]),
    // 输入框输入
    onInput(value) {
      this.keyword = value;
    },
    // 输入检索
    filter(item) {
      const filter =
        item.stationName.indexOf(this.keyword) != -1 ||
        item.provName.indexOf(this.keyword) != -1 ||
        item.cityName.indexOf(this.keyword) != -1;
      return filter;
    },
    // 选择出发站点
    selectStation(item) {
      this.updateStationStart(item);
      uni.navigateBack({
        delta: 2,
      });
    },
    // 重新请求列表
    refresh() {
      this.getStationLists();
    },
    // 获取车站列表
    getStationLists() {
      if (this.getStationLoading) {
        return;
      }
      this.getStationLoading = true;
      $saleStationsDepart({
        appId: uni.getAccountInfoSync().miniProgram.appId,
      })
        .then((res) => {
          console.log(res);

          this.getStationLoading = false;
          const data = res.data;
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            this.loadingText = "未查询到车站信息";
            this.refreshBtn = true;
            return;
          }
          if (!data.content || !data.content.length) {
            this.loadingText = "未查询到车站信息";
            this.refreshBtn = true;
          } else {
            this.stationList = data.content;
          }
        })
        .catch((err) => {
          this.loadingType = "no_network";
          this.loadingText = "哎呀，网络出错了";
          this.getStationLoading = false;
          this.refreshBtn = true;
          console.log("$saleStationsDepart-err:", err);
        });
    },
  },
  onLoad(options) {
    this.city = options.start; // 出发城市
    this.getStationLists(); // 获取车站列表
  },
};
</script>

<style lang="scss" scoped>
.stations_depart {
  .seach_wraper {
    position: fixed;
    top: 0;
    width: 690rpx;
    background-color: #ffffff;
    padding: 24rpx 30rpx 48rpx 30rpx;
  }
  .list {
    margin-top: 152rpx;
    padding: 0 32rpx;
    .list_item {
      height: 100rpx;
      line-height: 100rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #d1d7e1;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      .text:last-child {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-left: 30rpx;
      }
    }
    .no_filter {
      display: flex;
      .img {
        width: 248rpx;
        height: 200rpx;
      }
      .tip {
        font-size: 28rpx;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        height: 200rpx;
        .tip1,
        .tip2 {
          display: block;
        }
        .tip1 {
          padding: 58rpx 0 32rpx 0;
        }
        .tip2 {
          padding-bottom: 58rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(130, 141, 162, 1);
        }
      }
    }
  }
}
</style>
